<template>
	<div>
	<div class="t8" id="fayl">
		<div style="width: 100%;margin: auto;text-align: center;">
			<div class="d1-1">
				<span style="line-height: 60px;margin-left: 20px;font-size: 19px;font-weight: bold;"><span>{{name}}</span>
<!-- 					<span>高考志愿填报方案</span> -->
					<el-tooltip class="item" effect="dark" content="修改名称" placement="top" style="margin-left: 16px;">
						<el-button type="primary" icon="el-icon-edit" circle size="mini" @click="handleCurrentChange">
						</el-button>
					</el-tooltip>
				</span>

			</div>
			<div class="d1-2">
				<span style="font-size: 17px;line-height: 60px;">姓名:</span>
				<span
					style="font-size: 17px;line-height: 60px;margin-left: 3px;">{{user.name}}</span>
			</div>

			<el-table :data="tableData" border v-loading="loading" :cell-style="cellStyle" id="table"
							element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
							:header-cell-style="{textAlign: 'center',color:'black'}" style="width: 100%;font-size: 15px;color: #000000;" default-expand-all>
							<el-table-column type="expand" width="56">
								<template slot-scope="props">
									<el-table :data="props.row.majorList" style="width: 100%;"
										:header-cell-style="{display: 'none'}" :cell-style="cellStyles" border>
										<el-table-column width="54"><span></span></el-table-column>
										<el-table-column prop="majorCode" width="90"></el-table-column>
										<el-table-column></el-table-column>
										<el-table-column prop="majorName"></el-table-column>
										<el-table-column prop="courseRequire" width="130"></el-table-column>
										<el-table-column width="89">
											<template slot-scope="scope">
												<el-button type="text" size="small" style="color: #0000FF;cursor: pointer;"
													@click.native.prevent="deleteRow(scope.$index, tableData[props.$index].majorList)">删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</el-table-column>
							<el-table-column prop="programmeName" label="代码" width="90">
								<template slot-scope="scope">
									<span>{{scope.row.schoolCode}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="programmeName" label="院校名称|专业(类)名称">
								<template slot-scope="scope">
									<span>{{scope.row.schoolName}}</span>
								</template>
							</el-table-column>
							<el-table-column prop="" label="包含专业">
							</el-table-column>
							<el-table-column prop="" label="选科要求" width="130">
							</el-table-column>
							<el-table-column prop="programmeName" label="操作" width="90">
								<template slot-scope="scope">
									<el-button type="text" size="small" style="color: #0000FF;cursor: pointer;"
										@click="deleteScheme(scope.$index,tableData,scope.row)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
		</div>
		<el-dialog :title="'修改方案名称'" style="text-align: center;" :visible.sync="editFormVisibles"
			:close-on-click-modal="false" class="edit-form" @close="()=>{this.neweditForm={}}">
			<el-form label-width="80px">
				<el-input v-model="name" placeholder="请输入内容" style="width: 60%;"></el-input>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="updateName()">保存</el-button>
				<el-button @click.native="handleCancel()">取消</el-button>
			</div>
		</el-dialog>
	</div>
	<div id="npt">
		<el-button style="background-color: #1264ff;color: white;margin-top: 20px;" circle @click="update()">修改
		</el-button></br>
		<el-button style="background-color: #7870b6;color: white;margin-top: 20px;" circle
			@click="toprogramme()">返回</el-button>
	</div>
	</div>
</template>

<script>
	import {
		request
	} from "../util/request.js"
	export default {
		inject: ['reload'],
		data() {
			return {
				editFormVisibles: false,
				infos: [],
				tableData: [],
				loading: true,
				stuId: '',
				user: [],
				name: '',
				del: [],
				majorList: [],
				setIds: [],
				dropList: [{
						value: '1',
						label: '志愿A'
					},
					{
						value: '2',
						label: '志愿B'
					},
					{
						value: '3',
						label: '志愿C'
					},
					{
						value: '4',
						label: '志愿D'
					},
					{
						value: '5',
						label: '志愿E'
					},
					{
						value: '6',
						label: '志愿F'
					},
					{
						value: '7',
						label: '备选'
					},
					{
						value: '8',
						label: '取消'
					},
				],
				zyList: [{
						value: '1',
						label: '专业1'
					},
					{
						value: '2',
						label: '专业2'
					},
					{
						value: '3',
						label: '专业3'
					},
					{
						value: '4',
						label: '专业4'
					},
					{
						value: '5',
						label: '专业5'
					},
					{
						value: '6',
						label: '专业6'
					},
					{
						value: '7',
						label: '备选'
					},
					{
						value: '8',
						label: '取消'
					},
				],
			}
		},
		mounted(){
			
		},
		methods: {
			deleteRow(index, rows) {
			        rows.splice(index, 1);
					this.saveScheme()
			      },
			saveScheme() {
				this.scheme = []
				this.tableData.forEach(i => {
					this.scheme.push({
						"id":i.id,
						"schoolCode": i.schoolCode,
						"schoolName": i.schoolName,
						"majorList": i.majorList ? JSON.stringify(i.majorList).toString() : null,
						"programmeName": i.programmeName,
						"schemeName": i.schemeName,
						"programmeId": i.programmeId,
						"stuId": i.stuId
					})
				})
				this.scheme.forEach(a=>{
					this.setIds.forEach(v=>{
						if(a.id===v.id){
							a.schemeChange=v.schemeChange
						}
					})
				})
				request({
					method: 'post',
					url: 'stuNewSchoolScheme/saveNewSchoolScheme',
					data: this.scheme
				}).then(res => {
					if (res.code == 0 || res.code == 200) {
						this.$message({
							message: '保存成功！',
							type: 'success'
						});
						this.dialogVisible = false
					} else {
						this.$message({
							message: '保存失败~',
							type: 'error'
						});
					}
				})
			},
			toprogramme() {
				this.$router.push({
					path: '/XkAdministration'
				})
			},
			update() {
				const programme = this.tableData;
				this.$router.push({
					path: '/newSchoolProgramme',
					query: {
						programme: JSON.stringify(programme)
					}
				})
			},
			updateName() {
				request({
					method: 'POST',
					url: 'stuNewSchoolScheme/updateName',
					params: {
						name: this.name,
						programmeId: this.tableData[0].programmeId,
						stuId: this.stuId
					}
				}).then(res => {
					this.editFormVisibles = false;
					if (res.code == 0 || res.code == 200) {
						this.$message({
							showClose: true,
							message: '修改成功',
							type: 'success'
						});
					}else{
						this.$message({
							message: res.msg,
							type: 'error'
						});
					}
				})
			},
			deleteScheme(index, rows, row) {
				this.$confirm('确定删除该志愿嘛?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if(rows.length<=1){
						this.$message({
							message: '至少保留一个志愿~',
							type: 'error'
						});
					}else{
						request({
							method: 'POST',
							url: 'stuScheme/deleteScheme',
							params: {
								Id: row.id,
							}
						}).then(res => {
							if (res.code == 0 || res.code == 200) {
								rows.splice(index, 1);
								this.$message({
									message: '删除成功！',
									type: 'success'
								});
							} else {
								this.$message({
									message: '删除失败~',
									type: 'error'
								});
							}
						})
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 3) {
					return `textAlign:left;backgroundColor:rgb(212, 212, 212)`;
				} else {
					return 'textAlign:center;backgroundColor:rgb(212, 212, 212)'
				}
			},
			cellStyles({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 3) {
					return `textAlign:left;`;
				} else {
					return 'textAlign:center'
				}
			},
			handleCurrentChange: function() {
				this.editFormVisibles = true;
			},
			handleCancel() {
				this.editFormVisibles = false;
			},
			getScheme() {
				request({
					method: 'POST',
					url: 'stuNewSchoolScheme/getNewSchoolScheme',
					params: {
						stuId: this.stuId,
						programmeId: this.infos.programmeId
					}
				}).then(res => {
					this.tableData = res.data
					for (let i = 0; i < res.data.length; i++) {
						this.tableData[i].majorList = res.data[i].majorList ? JSON.parse(res.data[i].majorList) :
						[]
					}
					for (let m = 0; m < this.tableData.length; m++) {
						this.tableData[m].majorList.sort((a, b) => {
							return a['sort'].localeCompare(b['sort'])
						})
					}
					this.name = this.tableData[0].programmeName
					this.loading = false
				})
			},
		},
		created() {
			this.infos = this.$route.params.info
			this.infos = JSON.parse(localStorage.getItem('xkvolunteer'))
			const user = localStorage.getItem("stu");
			this.user = JSON.parse(user)
			this.stuId=this.user.id
			this.timer = setTimeout(()=>{   //设置延迟执行
			   this.getScheme()
			   
			},1000);
			
		}
	}
</script>

<style>
	body {
		
		overflow-x: hidden;
		margin: 0;
		padding: 0;
		/* width: 1536px; */
	}
	.t8{
		width: 1300px;
		min-width: 1300px;
		margin: auto;
	}

	.t8 .d1-1 {
		/* border-bottom: 1px solid #e7eaed; */
		height: 60px;
		width: 100%;
		/* background-color: #f2f2f2; */
	}

	.t8 .d1-2 {
		height: 60px;
		width: 100%;
		/* background-color: #f2f2f2; */
	}

	#table th,td {
		height: 40px;
		font-weight: 400;
		/* border: 1px #68696a solid; */
	}


	.t8 table {
		border-spacing: 0;
		/*去掉单元格间隙*/
	}

	#table .el-table__cell {
		padding: 0rem 0rem 0rem 0rem;
	}

	#table #table2 .cell {
		padding: 8px 0rem 8px 0rem;
	}

	#table .cell {
		padding: 0rem 0rem 0rem 0rem;
	}

	 #npt {
		position: fixed !important;
		right: 10px;
		top: 200px;
		z-index: 999;
	}
     #npt button {
		color: white;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		font-size: 15px;
		font-weight: initial;
		padding: 0;
		text-align: center;
	}

	 #npt button span {
		display: inline-block;
		margin: auto;
	}
</style>
